<template>
    <div class="login-form-wrap" :style="backgroundImageDiv" >
      <div class="login-form-content">
        <el-form label-width="120px" ref="loginForm" :model="loginForm" :rules="rules" status-icon>
          <el-form-item label="用户名" prop="name">
            <el-input v-model="loginForm.name"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password"/>
          </el-form-item>
          <el-form-item label="验证码" prop="validateCode">
            <el-col :span='16'>
              <el-input v-model="loginForm.validateCode"/>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-button type="text">看不清</el-button>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
        

    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App',
                loginForm:{
                  name:'',
                  password:'',
                  validateCode:''
                },
                backgroundImageDiv:{
                   backgroundImage: 'url(' + require('../image/login.jpg') + ')'
                },
                rules:{
                  name:[
                    {
                      required:true,message:'请输入用户名',trigger:'blur'
                    }
                  ],
                  password:[
                    {
                      required:true,message:'请输入密码',trigger:'tlur'
                    }
                  ],
                  validateCode:[
                    {
                      required:true,message:'请输入验证码',trigger:'tlur'
                    }
                  ]
                }
            }
        },
        methods:{
          submitForm (formName) {
            console.log(this.$refs[formName]);
            let that = this;
            this.$refs[formName].validate((valid) => {
              console.log(valid);
              if (valid) {
                this.$ajax.post("login",{
                  "name":that.loginForm.name,
                  "password":that.loginForm.password
                }).then((res)=>{
                  console.log(res.data.tooken);
                }).catch((res)=>{

                });
              } else {
                console.log("验证失败");
                return false;
              }
            });
          }
        }
    }
</script>
<style>
  .login-form-content {
    width: 550px;
    margin: 150px auto;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
    background-color: #fff;
    padding: 50px 20px 20px 20px;

  }
  .login-form-wrap{
    width: 100%;
    height: 100%;
    background-color: #63a35c;
    position: absolute;
  }
</style>
